<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body{
            width: 3000px;
            height: 3000px;
        }
    </style>
    <script>
        //   console.log(document.getElementById('day'));
          // 这么写得到的结果是  null 
          // 因为代码从上到下执行  这段代码执行完了 下边的标签还没出来 所以找不到 
         // 解决方案: 
         // 页面所有的内容全部加载完毕 接下来才执行 js代码 
        //  window.onload = function(){
        //     console.log(document.getElementById('day'));
        //  }
    </script>
</head>
<body>
    <script>
        // on+事件名  


        // load 
        // window.onload = function(){
        //     // 当页面所有的外部资源(html css js 视频 音频 图片 )全部加载完毕 
        //     // 这里边的代码才会执行 
        // }
        // // 也就是 只要加载完了 就会触发这个事件
        // 在head中写js 想获取body的内容 
        // 需要写这个事件 



        // resize 
        /* window.onresize = function(){} */
        // 页面的尺寸发生改变  横向纵向 
        // 只要一改变 立马触发

        // window.onresize = function(){
        //     alert('你是不是想搜答案');
        // }
        // scroll
        /* window.onscroll = function(){} */
        // 只要滚动条的位置发生变化  不管横向还是纵向 都会触发
        // window.onscroll = function(){
        //     console.log('开始滚动');
        // }

        // 上面总结  只要触发事件 后边的函数执行 
        
    </script>
<div class="time-item">
    <span><span id="day">1</span>天</span>
    <strong><span id="hour">2</span>时</strong>
    <strong><span id="minute">3</span>分</strong>
    <strong><span id="second">4</span>秒</strong>
</div>

</body>
</html>